<template>
  <div class="app">
    <myNavbar title="人工报单"></myNavbar>
    <list>
      <cell>
        <div class="address_box">
          <div @click="memberClick" v-if="from.memberId != ''">
            <div class="address_top">
              <text class="address_name">{{ memberName }}</text>
              <text class="address_phone">{{ memberPhone }}</text>
              <div class="details_lines" v-if="memberType == true"></div>
              <text class="details_right_copyTwo" v-if="memberType == true" @click="memberDetailsClick">详情</text>
            </div>
          </div>
          <div class="address_no" @click="memberClick" v-if="from.memberId == ''">
            <text class="address_no_title">点击选择会员</text>
          </div>
          <div class="address_right">
            <icon content="ios-arrow-forward" class="address_right_icon"></icon>
          </div>
        </div>

        <div class="address_box" v-if="from.memberId != ''">
          <div @click="addressClick" v-if="from.receiverId != ''">
            <div class="address_top">
              <text class="address_name">{{ from.consignee }}</text>
              <text class="address_phone">{{ from.phone }}</text>
            </div>
            <text class="address_content">{{ from.address }}</text>
          </div>
          <div class="address_no" @click="addressClick" v-if="from.receiverId == ''">
            <text class="address_no_title">点击选择地址</text>
          </div>
          <div class="address_right">
            <icon content="ios-arrow-forward" class="address_right_icon"></icon>
          </div>
        </div>
        <div class="submit_product">
          <div style="width: 640px;overflow: hidden">
            <div class="submit_product_content_box"
                 v-for="(item,index) in orderForm.itemList"
                 ref="itemDev" @swipe="handleSwipe($event,index)">
              <image class="submit_product_content_img" :src="item.thumbnail"></image>
              <div
                      style="width: 450px;display: flex;flex-direction: column;justify-content: space-between;margin-left: 20px">
                <div class="submit_product_content">
                  <text class="submit_product_content_title">{{ item.name }}</text>
                  <text class="submit_product_content_subtitle">{{ item.spec }}</text>
                  <div class="submit_product_content_row"></div>
                </div>
                <div class="submit_product_number">
                  <div class="product_botton_box" style="display:flex;flex-direction:row;">
                    <div class="product_botton_left">
                      <text class="submit_product_priceIcon">¥</text>
                    </div>
                    <div @click="priceChange(index)" class="product_price_input">
                      <text class="product_price_input_Title">{{ item.price }}</text>
                    </div>
                    <div class="product_botton_right" @click="priceInputRight(index,item.productId)">
                      <text class="product_botton_icon">&#xe695;</text>
                    </div>
                  </div>
                  <div class="product_botton_box" style="display:flex;flex-direction:row;">
                    <div class="product_botton_left" @click="reductionClick(index)">
                      <text class="product_botton_icon">&#xe609;</text>
                    </div>
                    <div @click="numChange(index)" class="product_price_input">
                      <text class="product_price_input_Title">{{ item.quantity | number }}</text>
                    </div>

                    <div class="product_botton_right" @click="addClick(index)">
                      <text class="product_botton_icon">&#xe620;</text>
                    </div>
                  </div>
                </div>
                <div class="history_box" v-if="changePriceType == true && index == changePriceIndex"
                     @click="isMaskCancel">
                  <div class="history_cancel_box">
                    <text class="history_cancel_icon">&#xe61a;</text>
                  </div>
                  <div class="history_content" @click="">
                    <div class='isMask_Price_header' v-if="historyForm.length > 0">
                      <text class="isMask_Price_header_title">销售日期</text>
                      <text class="isMask_Price_header_title">销售价格</text>
                    </div>
                    <div class='isMask_Price_box' v-for="items in historyForm" @click="isMaskChange(items.price)"
                         v-if="historyForm.length > 0">
                      <text style="font-size: 28px;flex:1;text-align: center">{{ items.createDate | formatDate }}</text>
                      <text class="isMask_Price_box_price">¥{{ items.price | price }}</text>
                    </div>
                    <div class="isMask_Price_box_Two" v-if="historyForm.length == 0">
                      <text class="isMask_Price_box_Two_Titlt">暂无历史价格</text>
                    </div>
                  </div>
                </div>
              </div>
              <div
                      style="background-color: #ff0000; width: 140px;justify-content: center; align-items: center;border-radius: 10px;margin-left: 20px"
                      @click="removeItem(index)">                    
                <text style="font-size: 30px; color:#ffffff">删除</text>
              </div>
            </div>
          </div>

          <div class="submit_subtotal" style="margin-bottom: 20px" v-if="itemList.length > 0">
            <text class="submit_subtotal_subtitle">共{{ orderForm.subQuantity }}件</text>
            <text class="submit_subtotal_title">小计：</text>
            <text class="submit_subtotal_Icon">¥</text>
            <text class="submit_subtotal_price">{{ orderForm.amountPayable }}</text>
          </div>

          <div class="submit_product_details" @click="couponsClick" v-if="itemList.length > 0">
            <text class="submit_product_details_title">店铺优惠</text>
            <div class="submit_product_detailsBox">
              <div style="display:flex;flex-direction:row;align-item:center">
                <text class="submit_product_details_IntroductionTwo" v-if="orderForm.discount>0">
                  {{ orderForm.discount | price }}
                </text>
                <text class="submit_product_details_IntroductionTwo" v-if="orderForm.discount==0">无优惠</text>
                <icon v-if="orderForm.discount>0" content="ios-arrow-forward"
                      class="submit_product_details_IconTwo"></icon>
              </div>
            </div>
          </div>
          <div class="submit_product_details" v-if="itemList.length > 0">
            <text class="submit_product_details_title">运费</text>
            <div class="submit_product_detailsBox">
              <div style="display:flex;flex-direction:row;align-item:center">
                <text class="submit_product_details_IntroductionTwo" v-if="orderForm.freight==0">包邮</text>
                <text class="submit_product_details_IntroductionTwo" v-if="orderForm.freight>0">
                  ¥{{ orderForm.freight }}
                </text>
              </div>
            </div>
          </div>
          <div class="submit_product_details" v-if="orderForm.itemList.length > 0">
            <text class="submit_product_details_title">订单备注</text>
            <div class="submit_product_detailsBox" @click="memoClick">
              <text class="submit_product_detailsBox_input">{{
                  orderForm.memo == "" ? '选填，请先和商家协商一致' : orderForm.memo
                }}
              </text>
            </div>
          </div>
          <div class="submit_subtotal" v-if="itemList.length > 0">
            <text class="submit_subtotal_subtitle">共{{ orderForm.subQuantity }}件</text>
            <text class="submit_subtotal_title">小计：</text>
            <text class="submit_subtotal_Icon">¥</text>
            <text class="submit_subtotal_price">{{ orderForm.amountPayable }}</text>
          </div>
          <div class="porduct_add" @click="shopAddClick">
            <text class="porduct_add_title">点击添加商品</text>
          </div>
        </div>
        <div class="submit_payMethod" v-if="itemList.length > 0 && orderForm.paymentVo.length>0">
          <div class="submit_payMethod_Header">
            <text class="submit_payMethod_Header_Title">支付方式</text>
          </div>
          <div class="submit_payMethod_Content" v-for="(item,index) in orderForm.paymentVo">
            <div class="submit_payMethod_Content_Column">
              <text class="submit_payMethod_Content_Title">{{ item.paymentPluginName }}</text>
              <text class="submit_payMethod_Content_SubTitle">可抵扣余额 ¥{{ item.balance }}</text>
              <text class="submit_payMethod_Content_Date" v-if="item.endDate !=underfind">
                有效期至：{{ item.endDate | formatTime }}
              </text>
            </div>
            <switch :key="times" :checked="item.chk" :disabled="item.chkType" @change="changeClick(index)"></switch>
          </div>
        </div>

        <div class="submit_payMethodTwo" v-if="itemList.length > 0">
          <div :class="[index !=3?'submit_payMethod_ContentTwo':'submit_payMethod_ContentThree']"
               v-for="(item,index) in pay"
               v-if="(item.isShow==true && item.paymentPluginId == 'paperPayPlugin') || item.paymentPluginId != 'paperPayPlugin'">
            <div class="submit_payMethod_Content_Row">
              <div>
                <image class="submit_payMethod_Content_Img" v-if="index == 0"
                       src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/cashImg.png"></image>
                <image class="submit_payMethod_Content_Img" v-if="index == 1"
                       src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/tickets.png"></image>
                <image class="submit_payMethod_Content_ImgTwo" v-if="index == 2"
                       src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/zhuanzhang1.png"></image>
                <image class="submit_payMethod_Content_Img" v-if="index == 3"
                       src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/yuejie.png"></image>
              </div>
              <text class="submit_payMethod_Content_Title">{{ item.paymentPluginName }}</text>
            </div>
            <switch v-if="item.isShow==true" :key="paytimes" :disabled="item.chkType"
                    @change="switchClick(index)"></switch>
          </div>
        </div>

        <div class="submit_payMethod" v-if="weekType == true">
          <div class="shippingInfo" @click="packageClick">
            <text class="shippingInfo_title">配送时间</text>
            <div class="shippingInfo_box">
              <div style="display:flex;flex-direction:row;align-item:center">
                <div style="display:flex;flex-direction:row;align-item:center"
                     v-for="(item,index) in weexDate">
                  <text class="submit_product_details_subtitle">{{ item.title }}</text>
                  <text class="submit_product_details_subtitle" v-if="index+1 != weexDate.length">、</text>
                </div>
                <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>
              </div>
            </div>
          </div>
        </div>

        <div class="submit_payMethod">
          <div class="submit_payMethod_Header">
            <text class="submit_payMethod_Header_Title">配送信息</text>
          </div>
          <div class="shippingInfo" @click="methodClick" style="margin-top: 30px"
               v-if="orderForm.itemList.length > 0">
            <text class="shippingInfo_title">配送方式</text>
            <div class="shippingInfo_box">
              <div style="display:flex;flex-direction:row;align-item:center;height: 50px">
                <text class="shippingInfo_subtitle">{{ methodName }}</text>
                <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>
              </div>
            </div>
          </div>
          <div class="shippingInfo" @click="siteClick" style="margin-top: 30px">
            <text class="shippingInfo_title">配送站点</text>
            <div class="shippingInfo_box">
              <div style="display:flex;flex-direction:row;align-item:center;height: 50px">
                <text class="shippingInfo_subtitle">{{ shopName }}</text>
                <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>
              </div>
            </div>
          </div>
          <div class="shippingInfo" style="margin-top: 30px" @click="personnelClick"
               v-if="orderForm.shippingMethod == 2">
            <text class="shippingInfo_title">配送人员</text>
            <div class="shippingInfo_box">
              <div style="display:flex;flex-direction:row;align-item:center;height: 50px">
                <text class="shippingInfo_subtitle">{{ personnelName }}</text>
                <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>
              </div>
            </div>
          </div>
        </div>
        <div style="width:750px;height:130px;"></div>
        <div class="submit_botton">
          <text class="submit_botton_subtitle">共{{ orderForm.subQuantity }}件 待付款</text>
          <text class="submit_botton_icon">¥</text>
          <text class="submit_botton_price">{{ amount }}</text>
          <button class="submit_botton_box botton_Bg_Color" @click="createClick" :text="payTitle"
                  :loading="payType"></button>
        </div>
        <shippingSite :shopIndex="shopIndex" v-if="siteType == true" @cencleSite="cencleSite"
                      @completeSite="completeSite"></shippingSite>
        <personnel :personnelIndex="personnelIndex" v-if="personnelType == true"
                   @completePersonnel="completePersonnel" @cenclePersonnel="cenclePersonnel"></personnel>
        <shippingMethod :methodIndex="methodIndex" :shippingMethod="shippingMethod" v-if="methodType"
                        @cencleMethod="cencleMethod" @completeMethod="completeMethod"></shippingMethod>
        <packagebox @cenclePackage="cenclePackage" @saveClick="saveClick"
                    v-if="packageType == true"></packagebox>
        <coupons :couponCodeName="couponCodeName" :promotions="orderForm.promotions"
                 @cenclecoupons="cenclecoupons" v-if="couponsType == true"></coupons>
      </cell>
    </list>
  </div>
</template>

<script>
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    import packagebox from '../../../components/package/package.vue'
    import shippingSite from './components/shippingSite.vue'
    import coupons from './components/coupons.vue'
    import personnel from './components/personnel.vue'
    import {
        getMenuTree
    } from '../../../api/sysMch.js'

    const animation = weex.requireModule('animation');
    const storage = weex.requireModule('storage');
    import {calculate, save, shipping, getHistoryList} from '@/api/order'
    import {receiverLocation} from '@/api/mapLine'
    import shippingMethod from './components/shippingMethod.vue'
    import {list as addressList} from '@/api/address'
    import {last} from '@/api/order'

    export default {
        data() {
            return {
                calculate: {},
                delivery: {
                    title: ''
                },
                deliveryType: false,
                submitType: false,
                address: {
                    consignee: '',
                    phone: '',
                    areaName: '',
                    address: ''
                },
                order_Details: {
                    address: null
                },
                sn: '',
                orderId: '',
                amount: 0,
                shippingMethods: [],
                shippingMethod: '',
                distribution: [],
                paymentVo: [],
                check_shippingData: [],
                payType: false,
                isWaterShow: false,
                couponCodeName: '',
                itemList: [],
                // itemList: [],
                cashType: true,
                ticketType: false,
                siteType: false,
                personnelType: false,
                from: {
                    memberId: '',
                    operatorId: '',
                    orderMethod: "1",
                    shippingMethod: "0",
                    officeId: '',
                    areaName: "",
                    address: "",
                    areaId: '',
                    receiverId: '',
                    memo: '',
                    phone: "",
                    consignee: "",
                    offsetAmount: 0,
                    shopId: '',
                    itemList: []
                },
                orderForm: {
                    itemList: []
                },
                shopName: '',
                shopIndex: 0,
                personnelIndex: 0,
                personnelName: '',
                operatorId: '',
                shopId: '',
                times: null,
                paytimes: null,
                pay: [
                    {
                        amount: 0,
                        chk: false,
                        isShow: true,
                        paymentPluginId: "cashPayPlugin",
                        paymentPluginName: "现金(未收)",
                        chkType: false,
                        balance: 0
                    },
                    {
                        amount: 0,
                        chk: false,
                        isShow: true,
                        paymentPluginId: "paperPayPlugin",
                        paymentPluginName: "纸质水票",
                        chkType: false,
                        balance: 0
                    },
                    {
                        amount: 0,
                        chk: false,
                        isShow: true,
                        paymentPluginId: "bankPayPlugin",
                        paymentPluginName: "转账(已收)",
                        chkType: false,
                        balance: 0
                    },
                    {
                        amount: 0,
                        chk: false,
                        isShow: true,
                        paymentPluginId: "debtPayPlugin ",
                        paymentPluginName: "月结欠款",
                        chkType: false,
                        balance: 0
                    }
                ],
                methodType: false,
                methodName: '普通快递',
                methodIndex: '0',
                weexDate: [{title: '请选择配送日期'}],
                packageType: false,
                weexTime: '',
                weekType: false,
                couponsType: false,
                memberName: '',
                memberPhone: '',
                historyPrice: 0,
                historyForm: [],
                changePriceType: false,
                changePriceIndex: '',
                memberType: false,
                payTitle: '提交订单',
                historyData: []
            }
        },
        created() {
            this.initIconFont()
            this.shippingDate = this.currentDate(new Date())
            this.memberTypeClick()
            this.loadMenus()
        },
        components: {
            myNavbar, shippingSite, personnel, shippingMethod, packagebox, coupons
        },
        filters: {
            formatTime(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            },
            formatDate(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d;
            },
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value) {
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        methods: {
            //调整商品添加
            memberTypeClick() {
                if (this.checkPermission(['member-list']) == true) {
                    this.memberType = true
                }
            },
            loadMenus() {
                getMenuTree().then(res => {
                    res.data.forEach(list => {
                        if (list.permission === 'product.list') {
                            const loadWater = list.childrens.find(item => {
                                return item.permission === 'waterTicket-list'
                            })
                            if (loadWater !== undefined) {
                                this.isWaterShow = true

                            }
                        }
                    })
                    this.pay.forEach(item => {
                        if (item.paymentPluginId == 'paperPayPlugin') {
                            item.isShow = this.isWaterShow
                        }
                    })
                })

            },
            shopAddClick() {
                var _this = this
                if (_this.from.memberId == '') {
                    eeui.toast('请先选择会员')
                    return
                }
                eeui.openPage({
                    url: 'root://pages/member/declaration/shopList.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, result => {
                    if (result.status == 'stop') {
                        storage.getItem('productAdd', event => {
                            if (event.result == 'success') {
                                _this.historyData = []
                                _this.itemList.forEach(function (item) {
                                    _this.historyData.push(item)
                                })
                                var product = JSON.parse(event.data)
                                var goodsDetails = {}
                                getHistoryList({memberId: this.from.memberId, productId: product.id})
                                    .then((res) => {
                                        if (!_this.isNull(res.data)) {
                                            goodsDetails = {
                                                productId: product.id,
                                                name: product.name,
                                                sn: product.sn,
                                                cost: product.cost,
                                                price: res.data[0].price,
                                                subTotal: res.data[0].price,
                                                unit: product.unit,
                                                spec: product.spec1 + product.spec2,
                                                discount: 0,
                                                quantity: 1,
                                                thumbnail: product.thumbnail
                                            };
                                            console.log(goodsDetails)
                                            _this.itemList.push(goodsDetails)
                                            _this.procuctFilter()
                                        } else {
                                            goodsDetails = {
                                                productId: product.id,
                                                name: product.name,
                                                sn: product.sn,
                                                cost: product.cost,
                                                price: product.price,
                                                subTotal: product.price,
                                                unit: product.unit,
                                                spec: product.spec1 + product.spec2,
                                                discount: 0,
                                                quantity: 1,
                                                thumbnail: product.thumbnail
                                            };
                                            console.log(goodsDetails)
                                            _this.itemList.push(goodsDetails)
                                            _this.procuctFilter()
                                        }
                                    }).catch((error) => {
                                    console.log('11111')
                                    console.log(error);
                                });
                                console.log('2222')
                            }
                        })
                        storage.removeItem('productAdd', event => {

                        })
                    }
                });
            },
            //商品过滤
            procuctFilter() {
                var _this = this
                let newfood = [];
                var temp = {};
                for (var i in this.itemList) {
                    var key = this.itemList[i].productId;
                    if (temp[key]) {
                        temp[key].productId = temp[key].productId;
                        temp[key].quantity = Number(temp[key].quantity) + Number(_this.itemList[i].quantity);
                        temp[key].subTotal = parseFloat(this.itemList[i].price) * parseFloat(temp[key].quantity);
                    } else {
                        temp[key] = {};
                        temp[key].productId = this.itemList[i].productId;
                        temp[key].quantity = this.itemList[i].quantity;
                        temp[key].subTotal = parseFloat(this.itemList[i].price) * parseFloat(temp[key].quantity);
                    }
                    temp[key].name = this.itemList[i].name;
                    temp[key].sn = this.itemList[i].sn;
                    temp[key].price = this.itemList[i].price;
                    temp[key].cost = this.itemList[i].cost;
                    temp[key].discount = this.itemList[i].discount;
                    temp[key].spec = this.itemList[i].spec;
                    temp[key].unit = this.itemList[i].unit;
                    temp[key].thumbnail = this.itemList[i].thumbnail;
                    temp[key].subType = this.itemList[i].subType
                }
                for (var k in temp) {
                    newfood.push(temp[k])
                }
                this.itemList = newfood
                this.calculateClick()
            },
            //右划删除
            handleSwipe(e, index) {
                if (e.direction == "left") {
                    this.goLeft(index);
                } else if (e.direction == "right") {
                    this.goRight(index);
                }
            },

            goLeft(index) {
                let itemEl = this.$refs.itemDev[index];
                //第二左滑条目与前一次左滑条目相同时，不处理
                if (index == this.currentIndex) {
                    return;
                }
                //当前有划出的条目的时候，左滑其他条目，当前的条目归位，
                if (this.currentIndex != -1) {
                    this.goRight(this.currentIndex);
                }
                //左滑当前条目
                if (this.currentIndex != index) {
                    animation.transition(itemEl, {
                        styles: {
                            transform: 'translate(-160px, 0px)',
                            transformOrigin: 'center center'
                        },
                        duration: 200, //ms
                        timingFunction: 'linear',
                        delay: 0 //ms
                    }, function () {
                    });
                    this.currentIndex = index;
                }
            },
            goRight(index, time = 200) {
                let itemEl = this.$refs.itemDev[index];
                animation.transition(itemEl, {
                    styles: {
                        transform: 'translate(0px, 0px)',
                        transformOrigin: 'center center'
                    },
                    duration: time, //动画时间
                    timingFunction: 'linear',//线性运动
                    delay: 0 //ms
                }, function () {
                });
                this.currentIndex = -1;
            },

            removeItem(index) {
                this.goRight(index, 0);
                this.itemList.splice(index, 1)
                this.orderForm.itemList.splice(index, 1)
                if (this.itemList.length > 0) {
                    this.calculateClick()
                }

            },
            //加减数量
            addClick(index) {
                var _this = this
                this.itemList[index].quantity = Number(this.itemList[index].quantity) + 1
                _this.procuctFilter()
            },
            reductionClick(index) {
                var _this = this
                if (this.itemList[index].quantity == 1) {
                    eeui.toast('此商品最少添加一件')
                    return
                }
                this.itemList[index].quantity = Number(this.itemList[index].quantity) - 1
                _this.procuctFilter()
            },
            numChange(index) {
                var _this = this
                eeui.input({
                    title: "请输入数量",
                    buttons: ["取消", "确定"],
                    inputs: [{
                        type: 'number',
                        value: _this.orderForm.itemList[index].quantity,
                        autoFocus: true
                    },]
                }, function (result) {
                    if (result.status == "click" && result.title == "确定") {
                        console.log(result)
                        if (result.data[0] == "") {
                            _this.itemList[index].quantity = 1
                        } else {
                            _this.itemList[index].quantity = result.data[0]
                        }
                        _this.procuctFilter()
                    }
                });
            },
            memoClick() {
                var _this = this
                eeui.input({
                    title: "请输入备注",
                    buttons: ["取消", "确定"],
                    inputs: [{
                        type: 'text',
                        value: _this.orderForm.memo,
                        autoFocus: true
                    },]
                }, function (result) {
                    if (result.status == "click" && result.title == "确定") {
                        console.log(result)
                        _this.orderForm.memo = result.data[0]
                    }
                });
            },
            //支付方式选择
            switchClick(index) {
                var _this = this
                if (_this.amount == 0) {
                    return
                }
                if (_this.pay[index].chk == false) {
                    _this.pay[index].chk = true
                    _this.pay[index].amount = _this.amount
                    // _this.amount = 0
                    _this.pay.forEach(function (item) {
                        if (item.amount == 0) {
                            item.chkType = true
                        }
                    })
                } else if (_this.pay[index].chk == true) {
                    _this.pay[index].chk = false
                    // _this.amount = _this.pay[0].amount
                    _this.pay[index].amount = 0
                    _this.pay.forEach(function (item) {
                        item.chkType = false
                    })
                }
            },
            //配送站点
            siteClick() {
                this.siteType = true
            },
            cencleSite() {
                this.siteType = false
            },
            completeSite(data) {
                this.siteType = false
                this.shopId = data.from.id
                this.shopName = data.from.name
                this.shopIndex = data.shopIndex
            },
            //配送人员
            personnelClick() {
                this.personnelType = true
            },
            completePersonnel(data) {
                this.personnelType = false;
                this.operatorId = data.from.id
                this.personnelName = data.from.name
                this.personnelIndex = data.personnelIndex
            },
            cenclePersonnel() {
                this.personnelType = false
            },
            //计算商品
            calculateClick() {
                var _this = this;
                _this.from.itemList = _this.itemList
                calculate(_this.from).then(response => {
                    console.log(response)
                    _this.orderForm = response.data.order
                    _this.orderForm.itemList.forEach(function (item) {
                        item.price = Number(item.price).toFixed(2)
                    })
                    _this.amount = response.data.amount
                    _this.times = new Date().getSeconds()
                    _this.paytimes = new Date().getSeconds()
                    _this.pay.forEach(function (item) {
                        item.chk = false
                        item.amount = 0
                        item.chkType = 0
                    })
                    this.methodName = '普通快递'
                    this.methodIndex = 0
                    if (!this.isNull(response.data.order.itemList)) {
                        var packageForm = []
                        response.data.order.itemList.forEach(function (item) {
                            if (item.subType == 1) {
                                packageForm.push(item)
                            }
                        })
                        if (packageForm.length > 0) {
                            _this.weekType = true
                        } else {
                            _this.weekType = false
                        }
                    }
                    this.shippingMethod = response.data.shippingMethods.split(',')
                    if (this.shippingMethod[0] == 0) {
                        this.methodName = '普通快递';
                        this.orderForm.shippingMethod = 0
                    } else if (this.shippingMethod[0] == 1) {
                        this.methodName = '到店自提';
                        this.orderForm.shippingMethod = 1
                    } else if (this.shippingMethod[0] == 2) {
                        this.methodName = '同城配送';
                        this.orderForm.shippingMethod = 2
                    }
                    if (!this.isEmptyString(response.data.couponCodeName)) {
                        _this.couponCodeName = response.data.couponCodeName
                    }
                }).catch(error => {
                    console.log(_this.historyData)
                    console.log(_this.itemList)
                    _this.itemList = _this.historyData
                })
            },
            //支付计算
            changeClick(index) {
                var _this = this
                _this.pay.forEach(function (item) {
                    item.amount = 0
                    item.chk = false
                    item.chkType = false
                })
                _this.paytimes = new Date().getSeconds()
                if (_this.orderForm.paymentVo[index].chk == false) {
                    if (_this.amount != 0) {
                        if (_this.amount >= _this.orderForm.paymentVo[index].balance) {
                            _this.amount = (Number(_this.amount) - Number(_this.orderForm.paymentVo[index].balance)).toFixed(2)
                            _this.orderForm.paymentVo[index].amount = _this.orderForm.paymentVo[index].balance
                            if (_this.amount == 0) {
                                _this.orderForm.paymentVo.forEach(function (item) {
                                    if (item.amount == 0) {
                                        item.chkType = true
                                    }
                                })
                                _this.pay.forEach(function (item) {
                                    if (item.amount == 0) {
                                        item.chk = true
                                    }
                                })
                                _this.$forceUpdate()
                            }
                        } else {
                            _this.orderForm.paymentVo[index].amount = _this.amount
                            _this.amount = 0;
                            _this.orderForm.paymentVo.forEach(function (item) {
                                if (item.amount == 0) {
                                    item.chkType = true
                                }
                            })
                            _this.pay.forEach(function (item) {
                                if (item.amount == 0) {
                                    item.chk = true
                                }
                            })
                            _this.$forceUpdate()
                        }
                        _this.orderForm.paymentVo[index].chk = true;
                    } else {
                        _this.orderForm.paymentVo[index].chk = false;
                        eeui.toast('本商品已无法抵用优惠')
                    }
                } else {
                    _this.orderForm.paymentVo[index].chk = false
                    _this.orderForm.paymentVo.forEach(function (item) {
                        item.chkType = false
                    })
                    _this.pay.forEach(function (item) {
                        item.chk = false
                    })
                    _this.$forceUpdate()
                    _this.amount = Number(_this.amount) + Number(_this.orderForm.paymentVo[index].amount)
                    _this.amount = _this.amount.toFixed(2)
                    _this.orderForm.paymentVo[index].amount = 0
                }
            },
            //保存订单
            createClick() {
                var _this = this
                if (this.isNull(_this.from.memberId)) {
                    eeui.toast('请选择会员')
                    return
                }

                if (this.isNull(_this.from.receiverId)) {
                    eeui.toast('请选择地址')
                    return
                }
                if (this.shopId == '') {
                    eeui.toast('请选择配送站点')
                    return
                }
                if (_this.orderForm.itemList.length == 0) {
                    eeui.toast('商品不能为空')
                    return
                }
                var pay = []
                _this.pay.forEach(function (item) {
                    if (item.amount > 0) {
                        pay.push(item)
                    }
                });
                if (_this.amount > 0 && pay.length <= 0) {
                    eeui.toast('请选择支付方式')
                    return;
                }
                if (pay.length > 0) {
                    pay[0].chk = true
                }

                // var paymentVoForm = []
                // pay.forEach(function (item) {
                //     var data = {
                //         chk: item.chk,
                //         paymentPluginName: item.paymentPluginName,
                //         balance: item.balance,
                //         paymentPluginId: item.paymentPluginId,
                //         amount: item.amount,
                //     }
                //     paymentVoForm.push(data)
                // })
                pay.forEach(function (item) {
                    _this.$delete(item, 'isShow')
                })
                var paymentVo = _this.orderForm.paymentVo.concat(pay);
                console.log(paymentVo)
                paymentVo.forEach(function (item) {
                    _this.$delete(item, 'chkType')
                })
                console.log(paymentVo)
                let formData = {
                    taxType: _this.orderForm.taxType,
                    memberId: _this.orderForm.memberId,
                    orderDate: _this.orderForm.orderDate,
                    operatorId: _this.operatorId,
                    shopId: _this.shopId,
                    orderMethod: _this.orderForm.orderMethod,
                    shippingMethod: _this.orderForm.shippingMethod,
                    officeId: _this.orderForm.officeId,
                    areaName: _this.orderForm.areaName,
                    address: _this.orderForm.address,
                    areaId: _this.orderForm.areaId,
                    receiverId: _this.orderForm.receiverId,
                    memo: _this.orderForm.memo,
                    phone: _this.orderForm.phone,
                    consignee: _this.orderForm.consignee,
                    freight: _this.orderForm.freight,
                    amountPayable: _this.orderForm.amountPayable,
                    amountPaid: _this.orderForm.amountPaid,
                    // paymentMethod: _this.form.paymentMethod,
                    subPrice: _this.orderForm.subPrice,
                    subQuantity: _this.orderForm.subQuantity,
                    offsetAmount: _this.orderForm.offsetAmount,
                    // pointDiscount: _this.form.pointDiscount,
                    paymentVo: paymentVo,
                    itemList: _this.orderForm.itemList
                };
                _this.payType = true
                _this.payTitle = '加载中'
                console.log('1111')
                console.log(formData)
                save(formData).then(
                    res => {
                        console.log(res)
                        _this.payType = false
                        _this.payTitle = '提交订单'
                        if (res.type == 'success') {
                            eeui.closePage()
                            eeui.openPage({
                                    url: 'root://pages/member/declaration/complete.js',
                                    statusBarType: 'immersion',
                                    statusBarStyle: false
                                },
                                (result) => {

                                }
                            );
                            _this.confirmClick(res.data.id, res.data.itemList)
                        }
                    }
                ).catch(error => {
                     _this.payType = false
                    _this.payTitle = '提交订单'
                })
            },
            // 自动接单
            confirmClick(id, itemList) {
                var _this = this;
                if (_this.orderForm.shippingMethod == 0) {
                    _this.operatorId = ''
                }
                itemList.forEach(item => { // 初始化发货数量
                    item.shippedQuantity = item.availableShippedQuantity
                })
                var form = {
                    shopId: _this.shopId,
                    orderDate: _this.shippingDate,
                    shippingEmployeeId: _this.operatorId,
                    weekTime: _this.weexTime,
                };
                shipping(id, JSON.stringify(itemList), form).then(response => {
                    eeui.toast(response.content)
                    // storage.setItem('orderShipping', 'true', event => {
                    //
                    // })
                }).catch(error => {
                    console.log(error)
                })
            },
            //选择会员
            memberClick() {
                var _this = this
                var addressType = true
                eeui.openPage({
                        url: 'root://pages/member/list.js',
                        statusBarType: 'immersion',
                        params: addressType,
                        statusBarStyle: false
                    },
                    (result) => {
                        if (result.status == 'stop') {
                            storage.getItem('address', event => {
                                if (event.result == 'success') {
                                    if (!this.isEmptyString(event.data)) {
                                        var address = JSON.parse(event.data)
                                        _this.memberName = address.name
                                        _this.memberPhone = address.mobile
                                        _this.from.memberId = address.id
                                        _this.from.address = ''
                                        _this.from.areaId = ''
                                        _this.from.phone = ''
                                        _this.from.consignee = ''
                                        _this.from.areaName = ''
                                        _this.from.receiverId = ''
                                        _this.addressListClick()
                                    }
                                }
                            })
                            storage.removeItem('address', event => {
                            })
                        }
                    }
                );
            },
            //后天无返回所需参数
            receiverLocationClick(data) {
                var _this = this
                receiverLocation({receiverId: data}).then(
                    res => {
                        console.log(res)
                        _this.operatorId = res.data.mapLine.shippingEmployeeId
                        _this.shopId = res.data.mapLine.shopId
                        _this.shopName = res.data.shopName
                        _this.personnelName = res.data.shippingEmployeeName
                    }
                ).catch(error => {

                })
            },
            //配送方式
            methodClick() {
                this.methodType = !this.methodType
            },
            cencleMethod() {
                this.methodType = false
            },
            completeMethod(data) {
                var _this = this
                this.methodType = false
                if (!_this.isNull(data.from)) {
                    _this.methodName = data.from.name
                    _this.orderForm.shippingMethod = data.from.status
                }
                this.methodIndex = data.methodIndex
                console.log(data)
            },
            saveClick(data) {
                var _this = this
                _this.weexDate = []
                _this.weexTime = data.weexTime
                if (data.weexData.length != 0) {
                    _this.weexDate = data.weexData
                } else {
                    _this.weexDate = [
                        {title: '请选择配送日期'}
                    ]
                }
                this.packageType = false
            },
            packageClick() {
                this.packageType = !this.packageType
            },
            cenclePackage() {
                this.packageType = false
            },
            cenclecoupons() {
                this.couponsType = false
            },
            couponsClick() {
                if (this.orderForm.discount == 0) {
                    eeui.toast('暂无优惠')
                } else {
                    this.couponsType = true
                }
            },
            addressListClick() {
                var _this = this
                addressList({memberId: this.from.memberId})
                    .then((res) => {
                        res.data.data.forEach(function (item) {
                            if (item.isDefault == true) {
                                _this.from.address = item.address
                                _this.from.areaId = item.areaId
                                _this.from.phone = item.phone
                                _this.from.consignee = item.consignee
                                _this.from.areaName = item.areaName
                                _this.from.receiverId = item.id
                                _this.receiverLocationClick(item.id)
                                _this.historyClick()
                            }
                        })
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            addressClick() {
                var _this = this
                var form = {
                    addressType: true,
                    memberId: _this.from.memberId
                }
                eeui.openPage({
                        url: 'root://pages/member/address/address.js',
                        statusBarType: 'immersion',
                        params: form,
                        statusBarStyle: false
                    },
                    (result) => {
                        if (result.status == 'stop') {
                            storage.getItem('addressList', event => {
                                if (event.result == 'success') {
                                    if (!this.isEmptyString(event.data)) {
                                        var address = JSON.parse(event.data)
                                        _this.from.address = address.address
                                        _this.from.areaId = address.areaId
                                        _this.from.phone = address.phone
                                        _this.from.consignee = address.consignee
                                        _this.from.areaName = address.areaName
                                        _this.from.receiverId = address.id
                                        _this.receiverLocationClick(address.id)
                                        if (_this.itemList.length > 0) {
                                            _this.calculateClick()
                                        }
                                    }
                                }
                            })
                            storage.removeItem('addressList', event => {
                            })
                        }
                    }
                );
            },
            priceChange(index) {
                var _this = this
                eeui.input({
                    title: "请输入价格",
                    buttons: ["取消", "确定"],
                    inputs: [{
                        type: 'number',
                        value: _this.orderForm.itemList[index].price,
                        autoFocus: true,
                    },]
                }, function (result) {
                    if (result.status == "click" && result.title == "确定") {
                        console.log(result)
                        if (result.data[0] == '') {
                            _this.itemList[index].price = 0
                        } else {
                            _this.itemList[index].price = result.data[0]
                        }
                        _this.calculateClick()
                    }
                });
            },
            isMaskChange(data) {
                console.log(data)
                this.changePriceType = false
                this.itemList[this.changePriceIndex].price = data
                this.calculateClick()
            },
            isMaskCancel() {
                this.changePriceType = false
            },
            priceInputRight(index, id) {
                this.changePriceType = !this.changePriceType
                this.changePriceIndex = index
                this.getHistoryListClick(id)
            },
            getHistoryListClick(id) {
                var _this = this
                _this.historyForm = []
                getHistoryList({memberId: this.from.memberId, productId: id})
                    .then((res) => {
                        console.log('11111')
                        console.log(res)
                        console.log('2222')
                        _this.historyForm = res.data
                    }).catch((error) => {
                    console.log('11111')
                    console.log(error);
                });
            },
            memberDetailsClick() {
                var _this = this
                eeui.openPage({
                    url: 'root://pages/member/memberInfo/memberInfo.js',
                    params: _this.from.memberId,
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, result => {

                })
            },
            historyClick() {
                var _this = this
                last({memberId: this.from.memberId})
                    .then((res) => {
                        console.log('11111')
                        console.log(res)
                        console.log(res.data)
                        console.log('2222')
                        if (res.data != null && res.data.itemList.length > 0) {
                            console.log('111222')
                            _this.itemList = res.data.itemList
                            _this.itemList.forEach(function (item) {
                                item.quantity = Number(item.quantity).toFixed(0)
                            })
                            _this.procuctFilter()
                        }

                    }).catch((error) => {
                    console.log('11111')
                    console.log(error);
                });
            },
        }
    }
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
  .app, body {
    background-color: rgba(248, 248, 248, 0.8);
  }

  .app {
    flex: 1
  }

  .tabbar {
    flex: 1;
    width: 750px;
  }

  .navbar {
    width: 750px;
    height: 100px;
  }

  .text {
    font-size: 26px;
  }

  .address_box {
    width: 690px;
    /*height: 226px;*/
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin-left: 30px;
    margin-top: 30px;
    position: relative;
    box-sizing: border-box;
    padding-left: 36px;
    padding-right: 36px;
    padding-top: 36px;
    padding-bottom: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .address_img {
    width: 690px;
    height: 226px;
    position: absolute;
    bottom: -6px;
    left: 0;
  }

  .address_top {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .address_label {
    width: 66px;
    height: 34px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(231, 91, 83, 1);
    border-radius: 2px;
    /* padding: 2px; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
  }

  .address_label_item {
    width: 62px;
    height: 30px;
    background-color: rgba(231, 91, 83, 1);
    border-radius: 1px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .address_label_title {
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .address_name {
    font-size: 32px;
    font-weight: 500;
    color: rgba(26, 26, 30, 1);
    display: block;
    /*margin-left: 20px;*/
  }

  .address_phone {
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    opacity: 0.5;
    display: block;
    margin-left: 20px;
  }

  .address_content {
    width: 557px;
    /*height: 69px;*/
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
    display: block;
    position: relative;
    margin-top: 10px;
  }

  .address_right {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*background-color: red;*/

  }

  .address_right_icon {
    font-size: 40px;
    color: #888888;
    width: 30px;
    height: 100px;
  }

  .submit_product {
    width: 690px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin-top: 30px;
    margin-left: 30px;
    box-sizing: border-box;
    padding-top: 20px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 20px;
    overflow: hidden;
  }

  .submit_product_content_box {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 40px;
    width: 800px;
    overflow: hidden;
  }

  .submit_product_content_img {
    width: 170px;
    height: 170px;
    background: rgba(250, 250, 250, 1);
    border-radius: 4px;
  }

  .submit_product_content {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    width: 450px;
    /*margin-left: 20px;*/
  }

  .submit_product_content_title {
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    display: block;
    text-overflow: ellipsis;
    lines: 2
  }

  .submit_product_content_subtitle {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    opacity: 0.3;
    lines: 1;
    text-overflow: ellipsis;
  }

  .submit_product_content_label {
    width: 134px;
    height: 34px;
    background: rgba(250, 243, 243, 1);
    border-radius: 1px;
    /* margin-top: 16px; */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .submit_product_content_labelTitle {
    font-size: 20px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 48px;
    opacity: 0.5;
  }

  .submit_product_number {
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 0;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 450px;
  }

  .submit_product_priceIcon {
    font-size: 18px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
    display: block;
    height: 36px;
  }

  .submit_product_priceTitle {
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    display: block;
  }

  .submit_product_quantity {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 28px;
    opacity: 0.5;
    text-align: right;
    display: block;
    width: 100%;
  }

  .submit_product_original_priceIcon {
    font-size: 14px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
    opacity: 0.3;
    display: block;
    height: 36px;
  }

  .submit_product_original_priceTitle {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    opacity: 0.3;
    display: block;
  }

  .submit_product_details {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
  }

  .submit_product_details_title {
    width: 170px;
    display: block;
    font-size: 28px;
    text-align: right;
  }

  .submit_product_detailsBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 450px;
    margin-left: 20px;
  }

  .submit_product_freightBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 540px;
    margin-left: 20px;
  }

  .submit_product_details_subtitle {
    font-size: 28px;
    color: rgba(26, 26, 30, 0.3);
    line-height: 50px;
  }

  .submit_product_details_Introduction {
    font-size: 24px;
    line-height: 26px;
    color: rgba(26, 26, 30, 1);
  }

  .submit_product_details_IntroductionTwo {
    font-size: 24px;
    line-height: 26px;
    color: rgba(231, 91, 83, 1);
  }

  .submit_product_details_Icon {
    font-size: 40px;
    color: #888888;
    width: 30px;
    height: 50px;
    padding-top: 2px;
  }

  .submit_product_details_IconTwo {
    font-size: 25px;
    color: #888888;
    width: 30px;
    height: 24px;
    padding-top: 2px;
  }

  .submit_product_detailsBox_input {
    width: 450px;
    font-size: 28px;
    padding-bottom: 3px;
    color: #888888;
  }

  .submit_payMethod {
    width: 690px;
    padding: 25px;
    box-sizing: border-box;
    margin-left: 30px;
    margin-top: 30px;
    background-color: white;
    border-radius: 16px;
  }

  .submit_payMethodTwo {
    width: 690px;
    box-sizing: border-box;
    margin-left: 30px;
    margin-top: 30px;
    background-color: white;
    border-radius: 16px;
    padding-left: 25px;
    padding-right: 25px;
  }

  .submit_payMethod_Header_Title {
    font-size: 34px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
  }

  .submit_payMethod_Content {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    margin-top: 30px;
  }

  .submit_payMethod_Content_Column {
    display: flex;
    flex-direction: column;
  }

  .submit_payMethod_Content_Title {
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    display: block;
  }

  .submit_payMethod_Content_SubTitle {
    font-size: 24px;
    font-weight: 400;
    color: rgba(231, 91, 83, 1);
    line-height: 36px;
    display: block;
    margin-top: 10px;
  }

  .submit_payMethod_Content_Date {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.3);
    line-height: 36px;
    display: block;
    margin-top: 10px;
  }

  .submit_product_content_PreferentialPrice {
    font-size: 24px;
    font-weight: 500;
    color: rgba(231, 91, 83, 1);
    line-height: 36px;
    margin-right: 10px;
    /* display: block; *//* margin-top: 20px; */
  }

  .submit_product_content_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 190px;
  }

  .submit_subtotal {
    width: 640px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .submit_subtotal_subtitle {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.5);
    margin-right: 5px;
    letter-spacing: 5px;
  }

  .submit_subtotal_title {
    font-size: 24px;
  }

  .submit_subtotal_Icon {
    font-size: 18px;
    color: rgba(231, 91, 83, 1);
    line-height: 30px;
    display: block;
    height: 30px;
  }

  .submit_subtotal_price {
    font-size: 24px;
    color: rgba(231, 91, 83, 1);
  }

  .submit_botton {
    width: 750px;
    height: 96px;
    background-color: rgba(248, 248, 248, 1);
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    z-index: 999
  }

  .submit_botton_subtitle {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    opacity: 0.5;
    margin-right: 5px;
    letter-spacing: 5px;
  }

  .submit_botton_price {
    font-size: 32px;
    font-weight: bold;
    color: rgba(231, 91, 83, 1);
    line-height: 36px;
    margin-right: 5px;
  }

  .submit_botton_icon {
    font-size: 24px;
    font-weight: bold;
    color: rgba(231, 91, 83, 1);
    line-height: 38px;
    display: block;
    height: 36px;
  }

  .submit_botton_box {
    width: 198px;
    height: 74px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-right: 25px;
    font-size: 32px;
    color: white;
  }

  .submit_botton_box_no {
    width: 198px;
    height: 74px;
    background-image: linear-gradient(129deg, rgb(179, 178, 177), rgb(231, 231, 230));
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-right: 25px;
    font-size: 32px;
    color: white;
  }

  .submit_botton_box_title {
    font-size: 32px;
    font-weight: 400;
  }

  .address_no {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .address_no_img {
    width: 80px;
    height: 80px;
  }

  .address_no_title {
    font-size: 32px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    margin-left: 10px;
  }

  .submit_isMask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .submit_isMask_content {
    width: 670px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    padding-top: 70px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: scroll;
  }

  .submit_isMask_header {
    width: 413px;
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
  }

  .submit_isMask_header_title {
    font-size: 32px;
    font-weight: 500;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
    text-align: center;
  }

  .submit_isMask_product {
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
  }

  .submit_isMask_product_img {
    width: 170px;
    height: 170px;
    background-color: rgba(250, 250, 250, 1);
    border-radius: 4px;
  }

  .submit_isMask_product_column {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    width: 400px;
  }

  .submit_isMask_product_title {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  .submit_isMask_product_subtitle {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    opacity: 0.3;
    margin-top: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .submit_isMask_product_quantity {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    opacity: 0.5;
    margin-top: 16px;
  }

  .isMask_botton {
    width: 670px;
    height: 158px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: rgba(0, 0, 0, 0.05);
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: row;
    background-color: white;
  }

  .isMask_botton_left {
    width: 272px;
    height: 74px;
    background-image: linear-gradient(to bottom, rgba(196, 198, 204, 1), rgba(213, 215, 219, 1));
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .isMask_botton_left_title {
    font-size: 32px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .isMask_botton_right {
    width: 282px;
    height: 74px;
    /* background: linear-gradient(129deg, rgba(233, 88, 79, 1), rgba(241, 114, 80, 1)); */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .isMask_botton_right_title {
    font-size: 32px;
    font-weight: 400;
    /* color: rgba(255, 255, 255, 1); */
  }

  .submit_payMethod_Content_Row {
    display: flex;
    flex-direction: row;
  }

  .submit_payMethod_Content_botton {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  .submit_payMethod_ContentTwo {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .submit_payMethod_ContentThree {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
  }


  .submit_payMethod_Content_Img {
    width: 30px;
    height: 30px;
    margin-right: 20px;
  }

  .submit_payMethod_Content_ImgTwo {
    width: 40px;
    height: 30px;
    margin-right: 10px;
    position: relative;
    left: -4px;
  }

  .porduct_add {
    height: 60px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .porduct_add_title {
    font-size: 28px;
    color: rgba(0, 0, 0, 0.5);
  }

  .product_botton_left {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-right-color: rgba(0, 0, 0, 0.2);
    border-right-width: 1px;
    border-right-style: solid;
    width: 60px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .product_botton_right {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-left-color: rgba(0, 0, 0, 0.2);
    border-left-width: 1px;
    border-left-style: solid;
    width: 60px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .product_botton_input {
    width: 70px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }

  .product_price_input {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .product_price_input_Title {
    font-size: 22px;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }

  .product_botton_box {
    display: flex;
    flex-direction: row;
    border-color: rgba(0, 0, 0, 0.2);
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    margin-top: 5px;
    position: relative;
  }

  .product_botton_icon {
    font-size: 20px;
    font-family: iconfont2;
    color: rgba(0, 0, 0, 0.5);
  }

  .shippingInfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    /*margin-bottom: 20px;*/
  }

  .shippingInfo_title {
    width: 170px;
    display: block;
    font-size: 30px;

  }

  .shippingInfo_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 450px;
    margin-left: 20px;
  }

  .shippingInfo_subtitle {
    font-size: 28px;
    color: rgba(26, 26, 30, 0.3);
    line-height: 50px;
  }

  .isMask_Price {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 115px;
    border-radius: 6px;
    border-color: rgba(0, 0, 0, 0.1);
    border-style: solid;
    border-width: 1px;
    background-color: white;
    overflow: auto;
  }

  .isMask_Price_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }

  .isMask_Price_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }

  .isMask_Price_header_title {
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
  }

  .isMask_Price_box_price {
    margin-left: 10px;
    font-size: 28px;
    flex: 1;
    text-align: center;
  }

  .isMask_Price_box_Two {
    width: 600px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .isMask_Price_box_Two_Titlt {
    font-size: 30px;
  }

  .details_lines {
    width: 2px;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-left: 20px;
  }

  .details_right_copyTwo {
    font-size: 28px;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 40px;
  }

  .history_box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .history_content {
    width: 600px;
    height: 400px;
    background-color: white;
    border-radius: 6px;
  }

  .history_cancel_box {
    width: 600px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .history_cancel_icon {
    font-family: iconfont2;
    font-size: 40px;
    color: white;
  }
</style>
